<template>
  <div class="top">
    <div class="top-one">
      <div class="center-box">
        <ul>
          <span v-if="this.token == null">
            <li class="login">
              <el-button type="text" @click="login()">
                <router-link to="">登录</router-link>
              </el-button>
            </li>
            <li class="su">|</li>
            <li class="registe">
              <el-button type="text" @click="regist()">
                <router-link to="">注册</router-link>
              </el-button>
            </li>
          </span>

          <span v-if="this.token != null" @click="tuichu()">
            <li class="login">
              {{ name }}
            </li>
          </span>

          <li class="order">
            <router-link to="/order">我的订单</router-link>
          </li>
          <li class="collection">
            <router-link to="/Collection">我的收藏</router-link>
          </li>
          <li class="cart">
            <div class="thing-count">
              <img src="../assets/Vector (2).png" alt="" />
              <div class="space">
                <router-link to="/Shop">购物车</router-link>
              </div>
              <span>({{ $store.state.number }})</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="top-two">
      <div class="pic"><img src="../assets/Rectangle 140.png" alt="" /></div>
      <div class="daohang">
        <ul>
          <li>
            <router-link to="/mains">首页</router-link>
          </li>
          <li>
            <router-link to="/allshop">全部商品</router-link>
          </li>
          <li>
            <router-link to="">关于我们</router-link>
          </li>
        </ul>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入搜索内容" class="shuru" />
        <div class="search-pic" @click="search">
          <img src="../assets/Vector.png" alt="" />
        </div>
      </div>
    </div>
    <el-dialog
      title="登录"
      :visible.sync="centerDialogVisible"
      width="15%"
      center
    >
      <el-form ref="fome" :model="fome" label-width="10px" :rules="rules">
        <el-form-item label="" prop="username">
          <el-input
            v-model="fome.username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="fome.password"
            show-password
            prefix-icon="el-icon-view"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('fome')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="注册" :visible.sync="zuce" width="15%" center>
      <el-form ref="fome" :model="fome" label-width="10px" :rules="rules">
        <el-form-item label="" prop="username">
          <el-input
            v-model="fome.username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="fome.password"
            show-password
            prefix-icon="el-icon-view"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="passwords">
          <el-input
            placeholder="请再次输入密码"
            v-model="fome.passwords"
            show-password
            prefix-icon="el-icon-view"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="registSubmitForm('fome')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { Login, regist, product, getInfo } from "../api/api";
import { setToken, getToken, removeToken } from "../uitls/cookie.js";
export default {
  name: "top",
  created() {
    // console.log("yyy",this.token);
    // console.log("rr",this.fome.username);
    this.getInfo();
  },
  data() {
    return {
      centerDialogVisible: false,
      zuce: false,
      fome: {
        username: "",
        password: "",
        passwords: "",
      },
      name: "",
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "字母开头,长度5-16之间,允许字母数字下划线",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "字母开头,长度6-18之间,允许字母数字下划线",
            trigger: "blur",
          },
        ],
        passwords: [
          { required: true, message: "请再输入密码", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "字母开头,长度6-18之间,允许字母数字下划线",
            trigger: "blur",
          },
        ],
      },
      token: getToken("token"),
    };
  },
  methods: {
    // login() {
    //     Login(this.fome).then(res => {
    //         console.log(res);
    //         this.centerDialogVisible = true;
    //     })
    // },
    regist() {
      this.zuce = true;
    },
    login() {
      this.centerDialogVisible = true;
    },
    getInfo() {
      getInfo().then((res) => {
        console.log("ff", res);
        this.name = res.data.data.username;
      });
    },
    //搜索
    product() {
      product().then((res) => {
        console.log(res);
      });
    },

    search() {
      this.product();
    },
    tuichu() {
      removeToken("token");
      this.token = getToken("token");
    },
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Login(this.fome).then((res) => {
            console.log(res);
            setToken("token", res.data.data);
            this.token = getToken("token");
            this.getInfo()
            this.centerDialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    registSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.fome.username);
          regist(this.fome).then((res) => {
            console.log(res);
            this.zuce = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.top-one {
  width: 100%;
  height: 42px;
  background: #3d3d3d;
  display: flex;
  margin: auto;
  position: relative;
}

.top-one ul {
  display: flex;
  height: 14px;
  line-height: 14px;
  width: 1200px;
  margin: auto;
  justify-content: flex-end;
}

ul li {
  list-style: none;
  height: 100%;
  position: relative;
}

.top-one li a {
  list-style-type: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  font-family: "PingFang SC";
  font-style: normal;
  line-height: 100%;
  color: #b0b0b0;
  text-decoration: none;
}

.top-one li a:hover {
  list-style-type: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  font-family: "PingFang SC";
  font-style: normal;
  line-height: 100%;
  color: #ffffff;
  text-decoration: none;
}

.login button {
  display: block;
  color: #b0b0b0;
  margin-top: -13px;
}
.login {
  display: block;
  color: #b0b0b0;
  margin-top: 1px;

  width: 57px;
}
.su {
  color: #b0b0b0;
  margin-left: 8px;
}

.registe {
  margin-left: 48px;
  margin-top: -27px;
}

.order {
  margin-left: 20px;
}

.collection {
  margin-left: 20px;
}

.top-two {
  height: 80px;
  width: 1200px;
  margin: auto;
  background-color: #ffffff;
  position: relative;
  border-bottom: 1px solid #e6e6e6;
}

.pic {
  height: 60px;
  width: 186px;
  position: absolute;
  left: 0;
  top: 20px;
}

.cart {
  width: 120px;
  margin-left: 20px;
}

.cart::after {
  display: block;
  content: "";
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.cart span {
  color: #b0b0b0;
}

.daohang ul {
  display: flex;
  list-style-type: none;
  justify-content: space-between;
}

.daohang {
  position: absolute;
  left: 308px;
  width: 220px;
  height: 80px;
}

.daohang ul li a {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 80px;
  color: #909399;
  text-decoration: none;
}

.daohang ul li a:focus {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 80px;
  color: #409eff;
}

.search {
  position: absolute;
  position: relative;
  height: 40px;
  width: 300px;
  left: 900px;
  top: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.search input {
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  padding-left: 15px;
  color: #c0c4cc;
  box-sizing: border-box;
}

.shuru {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  width: 243px;
}

.search-pic {
  position: absolute;
  width: 56px;
  height: 40px;
  left: 244px;
  background: #f5f7fa;
  border-radius: 0px 4px 4px 0px;
}

.space {
  display: inline-block;
  width: 42px;
  height: 14px;
  padding-left: 10px;
  padding-right: 10px;
}

.thing-count {
  width: 120px;
  height: 42px;
  position: absolute;
  top: 0;
  left: 0;
}

.search-pic img {
  padding-left: 21.4px;
  padding-top: 12.37px;
}

.center-box {
  width: 1200px;
  margin: auto;
}

.el-button--primary {
  width: 224px;
  height: 38px;
}
</style>